import { ComponentProps } from "react";
import Input from "./input";
import { Meta, StoryObj } from "@storybook/react/*";
import Icon from "../Icon/Icon";
// 解决Story中icon找不到的问题
import { fas } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fn } from "@storybook/test";
library.add(fas);

type StoryProps = ComponentProps<typeof Input>;

/** 导出Storybook所需的 meta data */
const meta: Meta<StoryProps> = {
    component: Input,
    title: 'Components/Input',
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    argTypes: {
        size: {
            options: ['lg', 'sm'],
            description: 'Input尺寸',
            control: {
                type: 'select',
            }
        },
        disabled: {
            control: {
                type: 'boolean',
            }
        },
        prepand: {
            control: {
                type: 'text'
            }
        },
        append: {
            control: {
                type: 'text'
            }
        },
        icon: {
            options: ['coffee', 'car', 'delete-left'],
            control: {
                type: 'select'
            }
        }
    },
    args: {
        onValueChange: fn(),
    }
}

export default meta;

type Story = StoryObj<StoryProps>;

export const Default: Story = {
    name: '基本样式',
};

export const Disabled: Story = {
    name: '禁用状态',
    args: {
        disabled: true,
    }
}

export const Size: Story = {
    name: '不同大小',
    render: (args) => {
        return (
            <div style={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
                <Input size='lg' placeholder='大号Input' {...args}/>
                <Input size='sm' placeholder='小号Input' {...args}/>
            </div>
        )
    }
}

export const InputWithIcon: Story = {
    name: '带图标',
    args: {
        icon: 'car'
    }
}

export const InputWithPrepandOrappend: Story = {
    name: '带前后缀',
    args: {
        prepand: 'https://',
        append: '.com',
    },
    render: ({prepand, append, ...args}) => {
        return (
            <div style={{display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'start'}}>
                <Input placeholder='添加前缀' prepand={prepand} {...args}/>
                <Input placeholder='添加后缀' append={append} {...args}/>
            </div>
        )
    }
}
